<template>
  <div class="pty">
    <div class="top">
      <div class="box">
        <div class="search">
          <input id="search" class="input" v-model="keyword" type="text" placeholder="请输入商标内容"/>
          <div class="all" @click="selCate">
            <span class="">|</span>
            <span class="">{{title}}</span>
            <span class="mui-icon mui-icon-arrowdown"></span>
          </div>
        </div>
        <span class="title" @click="search">查询商标</span>
      </div>
      <div class="cate">
        <div class="mui-input-row mui-radio mui-left">
          <label>商标名</label>
          <input name="radio1" type="radio" v-model="selected" value="商标名">
        </div>
        <div class="mui-input-row mui-radio mui-left">
          <label>申请人</label>
          <input name="radio1" type="radio" v-model="selected" value="申请人">
        </div>
        <div class="mui-input-row mui-radio mui-left">
          <label>注册号</label>
          <input name="radio1" type="radio" v-model="selected" value="注册号">
        </div>
      </div>
      <!--<div class="info">-->
      <!--2018版商标分类表-->
      <!--</div>-->
    </div>
    <div class="list" v-if="dataList.length > 0">
      <ul class="mui-table-view">
        <li  v-for="item in dataList" @click="getDetail(item.zch,item.gjfl,keyword)" class="mui-table-view-cell mui-media">
          <a href="javascript:;">
            <img v-if="isios != 'true'" class="mui-media-object mui-pull-left" :src="item.picSmall+ '&default=tm_jishang.png'">
            <img v-if="isios == 'true'" class="mui-media-object mui-pull-left" src="../../../static/img/sbjsw.jpg">
            <div class="mui-media-body">
              <p class="title">{{item.sbwzLs}}</p>
              <p>
                <span class="brg">{{item.zch}}</span>
                <span class="brg">第{{item.gjfl}}类</span>
              </p>
              <p>
                <span class="brg wx">{{item.newProcess | sublice(14)}}</span>
              </p>
              <p>
                申请人：<span>{{item.sqrmcZw | sublice(10)}}</span>
              </p>
              <p>申请时间：<span>{{item.sqrq}}</span></p>
            </div>
          </a>
        </li>
      </ul>
    </div>
    <div class="list" v-if="dataList.length == 0 && showNone">
      <div class="none">
        <span>{{info}}</span>
      </div>
    </div>
    <div class="page1" v-if="dataList.length > 0">
      <el-pagination
        background
        @current-change="handleCurrentChange"
        :current-page="pageNo"
        :page-size="pageSize"
        layout="prev, pager, next"
        :total="total"
        :pagerCount="5">
      </el-pagination>
    </div>
    <promotion-footer style="background-color: #f5f5f5;"></promotion-footer>
    <div class="center-block" v-show="isLoading" >
      <img  src="../../../static/img/load.gif" alt="">
    </div>
  </div>
</template>

<script>
  import PromotionFooter from '@/page/promotion/child/PromotionFooter'
  import API from '@/config/api'

  export default {
    name: "TrademarkList",
    components: {PromotionFooter},
    data() {
      return {
        selected: '商标名',
        keyword: '',
        token: '',
        gjfl: 0,
        total: 0,
        pageNo: 1,
        pageSize: 10,
        dataList: [],
        url: '',
        showNone: false,
        title: '全部分类',
        isios: 'false',
        info: '请输入查询内容！'
      }
    },
    computed: {
      isLoading() {
        return this.$store.state.isLoading;
      }
    },
    watch: {
      selected() {
        if(this.keyword){
          this.info='没有搜索到相关记录！'
        }else {
          this.info='请输入查询内容！'
        }
        this.showNone = true;
        this.geturl();
        this.init();
      }
    },
    created() {
      this.keyword = this.$route.query.trademarkName || '';
      this.gjfl = this.$route.query.gjfl || 0;
      this.selected = this.$route.query.selected || '商标名';
      this.title = this.$route.query.title || '全部分类';
      this.geturl();
      this.isios = localStorage.getItem('isiOS');
    },
    mounted() {
      this.init();
    },
    methods: {
      getDetail(zch, gjfl,keyword) {
         this.$router.push({path: '/trademarkdetail', query: {zch: zch, gjfl: gjfl,keyword}});
        // const {href} = this.$router.resolve({name: 'trademark_detail', params: {zch: zch, gjfl: gjfl}});
        // window.open(href, '_blank');
      },
      selCate() {
        var that = this;
        layer.open({
          content: '<div class="tip-bg">' +
          '<div class="inquire-box clearfix">' +
          '<ul class="clearfix">' +
          '<li data-value="0">全部分类</li>' +
          '<li data-value="1">化学原料</li>' +
          '<li data-value="2">颜料油漆</li>' +
          '<li data-value="3">日化用品</li>' +
          '<li data-value="4">燃料油脂</li>' +
          '<li data-value="5">医药卫生</li>' +
          '<li data-value="6">五金金属</li>' +
          '<li data-value="7">机械设备</li>' +
          '<li data-value="8">手工器械</li>' +
          '<li data-value="9">科学仪器</li>' +
          '<li data-value="10">医疗器械</li>' +
          '<li data-value="11">家用电器</li>' +
          '<li data-value="12">运输工具</li>' +
          '<li data-value="13">军用烟花</li>' +
          '<li data-value="14">珠宝钟表</li>' +
          '<li data-value="15">乐器</li>' +
          '<li data-value="16">文化用品</li>' +
          '<li data-value="17">橡胶制品</li>' +
          '<li data-value="18">皮革皮具</li>' +
          '<li data-value="19">建筑材料</li>' +
          '<li data-value="20">家具</li>' +
          '<li data-value="21">家用器具</li>' +
          '<li data-value="22">绳网袋篷</li>' +
          '<li data-value="23">纺织纱线</li>' +
          '<li data-value="24">床单布料</li>' +
          '<li data-value="25">服装鞋帽</li>' +
          '<li data-value="26">花边拉链</li>' +
          '<li data-value="27">地毯席垫</li>' +
          '<li data-value="28">体育玩具</li>' +
          '<li data-value="29">食品罐头</li>' +
          '<li data-value="30">调味茶糖</li>' +
          '<li data-value="31">水果花木</li>' +
          '<li data-value="32">啤酒饮料</li>' +
          '<li data-value="33">酒</li>' +
          '<li data-value="34">烟草烟具</li>' +
          '<li data-value="35">广告贸易</li>' +
          '<li data-value="36">金融物管</li>' +
          '<li data-value="37">建筑修理</li>' +
          '<li data-value="38">通讯电信</li>' +
          '<li data-value="39">运输旅行</li>' +
          '<li data-value="40">材料处理</li>' +
          '<li data-value="41">教育娱乐</li>' +
          '<li data-value="42">科研服务</li>' +
          '<li data-value="43">餐饮酒店</li>' +
          '<li data-value="44">医疗园艺</li>' +
          '<li data-value="45">社会法律</li>' +
          '</ul>' +
          '</div>' +
          '</div>'
          ,
          skin: 'alertbox',
          btn: '确定',
          shadeClose: false,
          success: function (elem) {
            $('.inquire-box ul li').each(function(){
              if($(this).data('value') == that.gjfl){
                  $(this).addClass('li-active')
              }
            })

            // 单个选中
            $('.inquire-box ul').on('click','li',function(){
              $(this).toggleClass('li-active').siblings('li').removeClass('li-active');
              that.gjfl = $(this).data('value');
              that.title = $(this).text();
            })

          },
          /*确定按钮的回调函数，关闭弹层之后的回调函数,返回当前层的索引*/
          yes: function (index) {
            layer.close(index);
            that.init();
          }
        });
      },
      search() {
        if(this.keyword){
          this.info='没有搜索到相关记录！';
          // if(this.keyword == localStorage.getItem('keyword')){
          //   return;
          // }else {
          //   localStorage.setItem('keyword',this.keyword);
          // }

        }else {
          this.info='请输入查询内容！'
          return;
        }

        $('#search').blur();
        this.geturl();
        this.init();
      },
      geturl() {
        switch (this.selected) {
          case '商标名': {
            this.url = API.searchKeyword;
            break;
          }
          case '申请人': {
            this.url = API.searchApplicant;
            break;
          }
          case '注册号': {
            this.url = API.searchRegNum;
            break;
          }

        }
      },
      handleCurrentChange(val) {
        this.pageNo = val;
        this.init();
      },
      init() {
        if(localStorage.getItem('username') == "" || localStorage.getItem('username')==null  ){
          var count = parseInt(localStorage.getItem('count')) || 0;
          count = count+1;
          localStorage.setItem('count', count);
          if(count>3){
            this.showNone = true;
            this.info='操作过频，请先登录！'
            this.$msg('操作过频，请先登录！')
            return;
          }
        }else {
          localStorage.setItem('count', 0);
        }

        this.$axios.post(API.getToken)
          .then((res) => {
            if (res && res.success) {

              this.token = res.data.token || '';
              this.$axios.get(this.url, {
                token: this.token,
                keyword: this.keyword,
                gjfl: this.gjfl,
                name: this.keyword,
                cardId: 0,
                zch: this.keyword,
                pageNo: this.pageNo,
                pageSize: this.pageSize
              }).then((res) => {
                if (res && res.data != null && res.data.allRecords > 0) {
                  this.dataList = res.data.brandList;
                  this.total = res.data.allRecords;
                } else {
                  this.dataList = [];
                  this.total = 0;
                  if(this.keyword){
                    this.info='没有搜索到相关记录！'
                  }else {
                    this.info='请输入查询内容！'
                  }
                }
                this.showNone = true;
              })
            }
          });
      },
    }
  }
</script>

<style lang="less">
  @bg: #5560b2;
  @fc: #ff9d42;
  @blue: #40afff;
  @red: #e23839;
  .pty {
    position: relative;
    padding-bottom: 1.1rem;
    z-index: 100002;
    .top {
      height: 3rem;
      background-color: @bg;
      padding: 0 0.6rem;
      padding-top: 0.6rem;
      .box {
        display: flex;
        .search {
          flex: 1;
          position: relative;
        }

        .search .all {
          position: absolute;
          right: 0.05rem;
          top: 0;
          height: 0.86rem;
          line-height: 0.86rem;
          color: #BBB;
          span:first-child {
            font-size: 0.35rem;
          }
          span:nth-child(2) {
            font-size: 0.28rem;
            color: #666;
          }
          span:nth-child(3) {
            font-size: 0.3rem;
            color: #666;
          }
        }

        .search input {
          display: inline-block;
          margin: 0;
          padding: 0;
          padding-left: 0.15rem;
          padding-right: 1.8rem;
          border-radius: 5px 0 0 5px;
          height: 0.86rem;
          border: 1px solid #E1E1E1;
          border-right: none;
          font-size: 0.28rem;
        }
        .mui-icon-search:before {
          font-size: 0.28rem;
        }
        .title {
          display: inline-block;
          width: 1.6rem;
          line-height: 0.86rem;
          height: 0.86rem;
          font-size: 0.28rem;
          text-align: center;
          background-color: #59C7F9;
          color: white;
          border-radius: 0 5px 5px 0;
          border: 1px solid #59C7F9;
        }
      }
      .cate {
        padding-top: 0.4rem;
        display: flex;
        color: white;
        justify-content: space-between;
        .mui-radio input[type='radio']:before {
          position: absolute;
          content: '';
          display: inline-block;
          border: 3px solid white;
          width: 0.2rem;
          height: 0.2rem;
          border-radius: 50px;
          background-color: #fff;
          top: 0.1rem;
        }
        .mui-radio.mui-left input[type='radio'] {
          left: 0;
        }
        .mui-radio input[type='radio']:checked:before {
          background-color: black;
        }
        .mui-radio.mui-left label {
          margin-right: 0;
          padding-right: 0;
          padding-left: 25px;
          font-size: 0.28rem;
          padding-bottom: 0.15rem;
        }
      }
      .info {
        color: @fc;
        text-align: center;
        font-size: 0.28rem;
      }
    }
    .list {
      padding: 0.2rem;
      background-color: #f5f5f5;

      .none {
        background-color: #fff;
        color: #f13536;
        height: 3rem;
        border: 1px solid #cecece;
        font-size: 0.3rem;
        line-height: 3rem;
        text-align: center;
        margin-bottom: 2.3rem;
      }
      .mui-table-view {
        border: 1px solid #cecece;
        border-bottom: none;
      }
      .mui-table-view-cell:after {
        left: 0;
      }
      .mui-ios .mui-table-view-cell a {
        border-left: 1px solid #cecece;
        border-right: 1px solid #cecece;
      }
      .mui-table-view-cell {
        height: 3rem;
        padding: 0.1rem 0.25rem;
      }
      .mui-media-object {
        max-width: 1.9rem;
        width: 1.9rem;
        height: 1.9rem;
      }
      .mui-table-view-cell > a {
        display: flex;
        height: 100%;
        align-items: center;
        padding: 0;
        margin: 0;
      }
      .mui-media-body {
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        height: 100%;
        p, span {
          color: #333;
          font-size: 0.3rem;
        }
        .title {
          color: @fc;
          font-size: 0.3rem;
        }

        .brg {
          display: inline-block;
          color: white;
          background-color: @blue;
          height: 0.5rem;
          line-height: 0.5rem;
          padding: 0 0.25rem;
          border-radius: 0.1rem;
          margin-right: 0.1rem;
        }
        .wx {
          background-color: #ff7101;
        }
      }
    }
    .page1 {
      height: 1.6rem;
      padding-top: 0.3rem;
      background-color: #f5f5f5;
      .el-pagination {
        display: flex;
        justify-content: center;
      }
      .el-pager li {
        border: 1px solid #999;
      }
      .el-pager li.active {
        border: 1px solid #409EFF;
      }
    }

  }



</style>
